<template>
  <view>
    <view class="s-btn" @click="buySubmit" v-if="vipPrice"> <custom-btn>{{vipPrice}}元 立即开通</custom-btn> </view>
    <view class="s-tips"><rich-text :nodes="vipText"></rich-text></view>
  </view>
</template>

<script setup>
import { getItem } from "@/utils/storage";
import useStore from "@/store";
import { fetchVipList } from "@/api";
import { textColorFn } from "@/utils";

const { app } = useStore();

const vipPrice = ref(0);
const vipText = ref("");

const isMember = computed(() => {
  const info = getItem("user_info") || {};
  const { title } = info?.member || {};
  return title && title == "至尊会员";
});

const getList = async () => {
  const { data } = await fetchVipList();
  const vData = data.filter((v) => v.id == 1);
  if (vData?.length) {
    vipPrice.value = Number(vData[0].price).toFixed(0);
    vipText.value = textColorFn(vData[0].smalltext);
  }
};

// 立即支付
const buySubmit = () => {
  const { appLogin, phone } = getItem("user_info");
  if (!appLogin) {
    uni.navigateTo({ url: "/subPages/register/index" });
    return;
  }
  if (!phone) {
    uni.navigateTo({ url: "/subPages/register/contact" });
    return;
  }
  const params = {
    member_id: 1,
  };
  app
    .surePayment(params)
    .then((res) => {
      uni.showToast({
        title: "开通成功!",
        icon: "none",
      });
    })
    .catch((err) => {});
};

onMounted(() => {
  getList();
});
</script>

<style lang=scss scoped>
.s-btn {
  width: 650rpx;
  height: 120rpx;
  line-height: 120rpx;
  font-weight: 800;
  font-size: 40rpx;
  color: #fff;
  background: linear-gradient(90deg, #ff602b 0%, #ff2b2b 100%);
  border-radius: 120rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}
.s-tips {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  padding-top: 10rpx;
}
</style>